<template>
    <div class="page">
        <o-navbar :container="true" :isFixed="true" :background="{ backgroundColor: 'rgb(34, 91, 142)' }">
            <view slot="container" class="nav-bar">
                <div class="select-text">南平市</div>
                <div class="input-wrap"></div>
                <div class="qian">签</div>
                <div class="icon">铃铛</div>
            </view>
        </o-navbar>
        <div class="swiper-wraps">
            <div class="semicircle"></div>
            <!-- <wanl-page-banner :pageData="item" /> -->
            <swiper
                class="wanlshop-container__main"
                :current-item-id="currentItemId"
                :style="{ height: '340px' }"
                @change="changeCurrent"
                @animationfinish="animationFinish"
            >
                <swiper-item item-id="home">
                    <view class="home">
                        <wanl-page-advert-banner :advertData="bannerData.banner_ad" />
                    </view>
                </swiper-item>
            </swiper>
        </div>
    </div>
</template>

<script>
import ONavbar from "../components/o-navbar/index.vue";
import { mapState, mapActions } from "vuex";
export default {
    data() {
        return {
            headHeight: 75,
            windowHeight: 0,
            headTop: 0,
            currentItemId: "home",
            currentData: {},
            scrollLeft: 0,
            isModal: false,
            WanlScroll: 0, //记录页面滚动
            scrollStype: false, //滚动状态
            filterIndex: 0, //
            priceOrder: 0, //1 价格从低到高 2价格从高到低
            liststyle: "col-1-10", //列表样式
            xp_good: [], //商品列表数据
            jp_good: [],
            qc_good: [],
            bannerData: {},
            showRight: false,
            category: "",
            goodsType: "goods",
            empty: "没有找到任何宝贝",
            params: {
                search: "",
                sort: "weigh",
                order: "asc",
                page: 1,
                filter: {},
                op: {},
            },
            likeData: [],
            reload: false, //判断是否上拉
            last_page: 0,
            status: "loading",
            contentText: {
                contentdown: "",
                contentrefresh: "正在加载..",
                contentnomore: "没有更多数据了",
            },
            city_name: "平邑",
        };
    },
    computed: {
        ...mapState(["common", "user", "update", "statistics"]),
    },
    onShow() {
        // #ifdef APP-PLUS
        plus.navigator.setFullscreen(false);
        // #endif
        // 计算页面尺寸
        let sys = this.$wanlshop.wanlsys();
        this.headTop = sys.top;
        this.headHeight = sys.height + uni.upx2px(60);
        this.windowHeight = sys.windowHeight;
        setTimeout(() => {
            uni.setNavigationBarColor({
                frontColor: this.$store.state.common.modulesData.homeModules.page
                    ? this.$store.state.common.modulesData.homeModules.page.style.navigationBarTextStyle
                    : "",
                backgroundColor: this.$store.state.common.modulesData.homeModules.page
                    ? this.$store.state.common.modulesData.homeModules.page.style.navigationBarBackgroundColor
                    : "",
            });

            // console.log(this.statistics.notice)
            var total = this.statistics.notice.notice + this.statistics.notice.order + this.statistics.notice.chat;
            // console.log(total);
            if (total > 0) {
                uni.setTabBarBadge({
                    //显示数字
                    index: 2, //tabbar下标
                    text: "" + total + "",
                });
            }
        }, 200);

        this.city_name = uni.getStorageSync("city_name");
        console.log(this.city_name);
    },
    onLoad() {
        this.loadData();
        this.loadAd();
        if (this.goodsData.length == 0) {
            // this.loadlikeData();
        }
    },
    // 监听上拉
    onPullDownRefresh() {
        this.params.page = 1;
        this.reload = true;
        this.loadData();
    },
    // 下拉刷新
    onReachBottom() {
        if (this.params.page >= this.last_page) {
            this.status = "noMore";
        } else {
            this.reload = false;
            this.contentText.contentdown = "上拉显示更多";
            this.params.page = this.params.page + 1; //页码+1
            this.status = "loading";
            this.loadData();
        }
    },
    // 监听滚动
    onPageScroll(object) {
        if (object.scrollTop > this.WanlScroll) {
            this.scrollStype = false;
        } else {
            this.scrollStype = true;
        }
        if (object.scrollTop < 0) {
            this.scrollStype = false;
        }
        this.WanlScroll = object.scrollTop;
    },
    // 监听返回
    onUnload() {
        if (this.showRight) {
            this.closeDrawer();
            return true;
        }
    },

    methods: {
        ...mapActions({
            download: "update/download", // 立即下载
            ignore: "update/ignore", // 忽略更新
        }),
        toPage() {
            uni.navigateTo({
                url: "/pages/city",
            });
        },
        // 动画
        animationFinish(e) {
            //#ifdef APP-PLUS
            this.changeCurrent(e);
            //#endif
        },
        // 滚动的tag
        changeCurrent(e) {
            this.currentItemId = e.detail.currentItemId;
            this.scrollLeft = (e.detail.current - 1) * 50;
        },
        //异步加载商品列表
        async loadAd() {
            // this.params.good_type_id = 'good';
            this.params.region_name = "托普·平邑仓";
            await uni.request({
                url: "/api/home/index_ad",
                success: (res) => {
                    this.bannerData = res.data;
                },
            });
        },
        //异步加载商品列表
        async loadData() {
            // this.params.good_type_id = 'good';
            this.params.region_name = "托普·平邑仓";
            await uni.request({
                url: "/api/home/home",
                data: this.params,
                success: (res) => {
                    this.xp_good = res.data.xp_good;
                    this.qc_good = res.data.qc_good;
                    this.jp_good = res.data.jp_good;
                },
            });
        },
        // 滚动底部加载猜你喜欢
        async loadlikeData() {
            await uni.request({
                url: `/wanlshop/product/likes?pages=${this.goodsType}`,
                success: (res) => {
                    this.likeData = res.data; //评论数据 追加
                },
            });
        },
        // 加载侧边栏数据
        async loadDrawer() {
            this.drawerParams.type = this.goodsType;
            await uni.request({
                url: "/wanlshop/product/drawer",
                data: this.drawerParams,
                success: (res) => {
                    var brand = [],
                        attribute = [];
                    if (res.data.brand) {
                        res.data.brand.forEach((item) => {
                            var brandData = {
                                id: item.id,
                                name: item.name,
                                fold: false, // 展开
                                choice: false,
                            };
                            brand.push(brandData);
                        });
                    }
                    if (res.data.attribute) {
                        res.data.attribute.forEach((item) => {
                            var value = [];
                            item.value.forEach((vo) => {
                                var valueData = {
                                    name: vo.name,
                                    choice: false,
                                };
                                value.push(valueData);
                            });
                            var attributeData = {
                                name: item.name,
                                value: value,
                                fold: false,
                            };
                            attribute.push(attributeData);
                        });
                    }
                    this.drawerData.brand = brand;
                    this.drawerData.attribute = attribute;
                },
            });
        },
        //筛选点击
        tabClick(index) {
            if (this.filterIndex === index && index !== 3) {
                return;
            }
            this.filterIndex = index;
            if (index === 3) {
                this.priceOrder = this.priceOrder === 1 ? 2 : 1;
            } else {
                this.priceOrder = 0;
            }

            // 排序方式
            if (index === 0) {
                this.params.sort = "weigh";
                this.params.order = "desc";
            }
            if (index === 1) {
                this.params.sort = "sales";
                this.params.order = "desc";
            }
            if (index === 2) {
                this.params.sort = "createtime";
                this.params.order = "desc";
            }
            if (index === 3 && this.priceOrder === 1) {
                this.params.sort = "price";
                this.params.order = "desc";
            }
            if (index === 3 && this.priceOrder === 2) {
                this.params.sort = "price";
                this.params.order = "asc";
            }
            this.status = "loading";
            this.params.page = 1;
            this.reload = true;
            this.loadData();
            uni.pageScrollTo({
                duration: 300,
                scrollTop: 0,
            });
        },
        // 打开抽屉，并且加载品牌和类目属性
        showDrawer() {
            this.showRight = true;
            if (!this.drawerType.first) {
                this.loadDrawer();
                this.drawerType.first = true;
            }
        },
        // 点击抽屉
        onDraver(e) {
            var index = e.currentTarget.dataset.attribute,
                key = e.currentTarget.dataset.key;
            if (key == "brand" || key == "city") {
                // 取消所有选项,选中下面
                this.drawerData[key].forEach((item, keys) => {
                    keys != index ? (item.choice = false) : "";
                });
                // 取消同城
                this.drawerData.sameCity.choice = false;
                this.drawerData[key][index].choice = !this.drawerData[key][index].choice;
            } else if (key == "sameCity") {
                // 取消所有城市选项
                this.drawerData.city.forEach((item) => {
                    item.choice = false;
                });
                this.drawerData.sameCity.choice = !this.drawerData.sameCity.choice;
            } else {
                // 取消所有选项,选中下面
                this.drawerData.attribute[index].value.forEach((item, keys) => {
                    keys != key ? (item.choice = false) : "";
                });
                this.drawerData.attribute[index].value[key].choice = !this.drawerData.attribute[index].value[key].choice;
            }
        },
        // 提交抽屉
        onDrawerTo() {
            // 查询价格
            if (this.drawerData.price.low != "" && this.drawerData.price.high != "") {
                this.params.filter.price = this.drawerData.price.low + "," + this.drawerData.price.high;
                this.params.op.price = "BETWEEN";
            } else {
                delete this.params.filter.price;
                delete this.params.op.price;
            }
            // 查询地址
            var cityData = "";
            this.drawerData.city.forEach((item) => {
                if (item.choice) {
                    cityData = item.name;
                }
            });
            if (cityData) {
                this.params.filter["shop.city"] = "%" + cityData + "%";
                this.params.op["shop.city"] = "LIKE";
            } else if (this.drawerData.sameCity.choice) {
                this.params.filter["shop.city"] = this.drawerData.sameCity.name;
                this.params.op["shop.city"] = "LIKE";
            } else {
                delete this.params.filter["shop.city"];
                delete this.params.op["shop.city"];
            }
            // 查询品牌
            var brandData = "";
            this.drawerData.brand.forEach((item) => {
                if (item.choice) {
                    brandData = item.id;
                }
            });
            if (brandData) {
                this.params.filter.brand_id = brandData;
                this.params.op.brand_id = "=";
            } else {
                delete this.params.filter.brand_id;
                delete this.params.op.brand_id;
            }
            // 查询属性
            var attributeData = [];
            this.drawerData.attribute.forEach((item, index) => {
                // item.name
                item.value.forEach((vo, index) => {
                    if (vo.choice) {
                        attributeData.push("%" + vo.name + "%");
                    }
                });
            });
            // 1.0.8升级 有此项无法查询
            if (attributeData.length > 0) {
                this.params.filter.category_attribute = attributeData.join(",");
                this.params.op.category_attribute = "LIKE";
            } else {
                delete this.params.filter.category_attribute;
                delete this.params.op.category_attribute;
            }
            this.status = "loading";
            // 1.0.8升级
            this.goodsData = [];
            this.params.page = 1;
            this.reload = true;
            this.loadData();
            this.closeDrawer();
        },
        // 重置抽屉
        onDrawerReset() {
            this.drawerData.city.forEach((item) => {
                item.choice = false;
            });
            this.drawerData.sameCity.choice = false;
            this.loadDrawer();
        },
        // 点击抽屉标题
        onDraverTitle(e) {
            var stype = e.currentTarget.dataset.key;
            if (stype === "city") {
                this.drawerType[stype] = !this.drawerType[stype];
            } else {
                this.drawerData.attribute[stype].fold = !this.drawerData.attribute[stype].fold;
            }
        },
        // 关闭抽屉
        closeDrawer() {
            this.showRight = false;
        },
        search() {
            this.$wanlshop.to(`/pages/page/search?type=${this.goodsType}`, "fade-in", 100);
        },
        editListstyle() {
            this.liststyle = this.liststyle == "col-1-10" ? "col-2-20" : "col-1-10";
        },
    },
    components: {
        ONavbar,
    },
};
</script>
<style lang="scss">
.page {
    .nav-bar {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 32rpx;
        .input-wrap {
            width: 350rpx;
            height: 70rpx;
            background: #fff;
            border-radius: 50rpx;
            margin-left: 20rpx;
            margin-right: 10rpx;
        }
        .qian {
            width: 50rpx;
            height: 50rpx;
            text-align: center;
            line-height: 50rpx;
            border-radius: 50%;
            box-sizing: border-box;
            font-size: 28rpx;
            border: 1rpx solid #fff;
            margin-right: 20rpx;
        }
    }
    .swiper-wraps {
        position: relative;
        overflow: hidden;
        min-height: 500rpx;
        .semicircle {
            top: -180px;
            left: -80px;
            position: absolute;
            width: 550px;
            height: 250px;
            background: #225b8e;
            border-radius: 50%;
        }
    }
}
</style>
